

<template>
    <div class="min-h-screen flex"> <!-- h-screen定义在子页面中 -->
      <!-- 左侧导航栏 -->
      <aside :class="['w-64 bg-gray-800 text-white ', {'w-20': isCollapsed}]">
        <div class="p-4 flex items-center">
          <img src="../assets/user.png" 
               class="w-10 h-10 object-cover" alt="">
          <span v-show="!isCollapsed" class="ml-3 text-xl font-bold">管理系统</span>
        </div>
        
        <nav class="mt-6">
          <div v-for="(menu, index) in menus" :key="index" class="px-4 py-2">
            <div :class="['flex items-center cursor-pointer hover:bg-gray-700 rounded-lg p-2', {'justify-center': isCollapsed}]"
            
                 @click="router.push(menu.path)">
                 <i :class="['fas',menu.icon, 'text-2xl', {'mr-3': !isCollapsed}]"></i>
              <span v-show="!isCollapsed" >{{ menu.name }}</span>
            </div>
          </div>
        </nav>
      </aside>
    <!-- 右侧内容 -->
     <div class="flex-1 ml-64">
      <router-view></router-view>
    </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { useRouter } from 'vue-router'
  import { ref } from 'vue';
import { watch } from 'vue'
const isCollapsed = ref(false);
const activeMenu = ref('仪表盘');
const router = useRouter();
  
  const menus = [
    { name: '仪表盘', icon: 'fa-tachometer-alt',path: '/' },
    { name: '订单管理', icon: 'fa-shopping-cart',path: '/orders' },
    { name: '用户管理', icon: 'fa-users' ,path: '/Users' },
    { name: '商品管理', icon: 'fa-box' ,path: '/shopping' },
    { name: '数据统计', icon: 'fa-chart-bar' ,path: '/data' },
    { name: '系统设置', icon: 'fa-cog' ,path: '/setting' }
  ];
 // 监听路由变化更新菜单状态
 watch(
  () => router.currentRoute.value.path,
  (newPath) => {
    const currentMenu = menus.find(menu => menu.path === newPath)
    if (currentMenu) {
      activeMenu.value = currentMenu.name
    }
  },
  { immediate: true }
)
  </script>
  
  <style scoped>
  .bg-gray-800 {
    background-color: #1e293b;
  }
  
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* 添加过渡动画 */
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-active .modal-container,
.modal-leave-active .modal-container {
  transition: transform 0.3s ease;
}

.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
  transform: scale(0.95);
}
  </style>
  
  